<template>
	<view class="loign">
		<view class="headerLogin">
			<view class="label">手机号登录</view>
			<view class="sLogin">未注册的手机号登录后将自动注册</view>
		</view>
		<view class="loginForm">
			<uni-forms :modelValue="formData" ref="form" label-position='left' :rules="rules" validate-trigger="blur">
				<uni-forms-item name="mobile">
					<uni-easyinput type="text" v-model="formData.mobile" placeholder-style="color: #979797"
						placeholder="请输入手机号" :clearable="false" />
				</uni-forms-item>
				<!-- <uni-forms-item name="captchaCode">
					<uni-easyinput type="text" v-model="captchaCode" placeholder-style="color: #979797"
						placeholder="请输入图形验证码" :clearable="false" />
					<view class="Code">
						<canvas style="width:60rpx;height:30rpx" canvas-id="canvasW" @error="canvasT"></canvas>
					</view>
				</uni-forms-item> -->
				<uni-forms-item name="smsCode" class="uni-forms-item__content">
					<uni-easyinput type="text" width="60rpx" v-model="formData.smsCode"
						placeholder-style="color: #979797" placeholder="请输入验证码" :clearable="false" />
					<view class="Code" v-if="!time" @tap="Code">
						获取验证码
					</view>
					<view class="timeForm Code" v-else>
						<span>({{num}})秒重新发送</span>
					</view>
				</uni-forms-item>
			</uni-forms>
			<button @tap="submitForm" class="queryLogin">登录</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		loginApi
	} from '@/apis/login.js'
	// import store from '@/store/index.js'
	import {
		useStore
	} from 'vuex' // 引入useStore 方法
	const store = useStore()

	import {
		log
	} from 'util';
	// form表单  246810
	const formData = ref({
		mobile: '13333333333',
		smsCode: "246810",
	})
	// 图片验证码
	// const captchaCode = ref('')

	uni.setNavigationBarTitle({
		title: '会员登录'
	});

	const form = ref()
	// 校验
	const rules = {
		mobile: {
			rules: [{
					required: true,
					errorMessage: '请输入手机号',
				},
				{
					pattern: '^(?:(?:\\+|00)86)?1\\d{10}$',
					errorMessage: '手机号格式不正确',
				}
			]
		},
		smsCode: {
			rules: [{
				required: true,
				errorMessage: '请输入验证码',
			}]
		}
	}
	// 控制验证按钮
	const time = ref(false)
	// 倒计时
	const num = ref(60)
	// 点击验证码
	const Code = () => {
		time.value = true
		let timer = setInterval(() => {
			num.value--
			if (num.value < 0) {
				time.value = false
				clearInterval(timer.value)
			}
		}, 1000)
	}
	// 登录校验
	const submitForm = () => {
		// console.log(form.value);
		form.value.validate().then(async () => {
			// let res = await loginApi(formData.value)
			let res = await store.dispatch('user/getLoginApi', formData.value)
			// console.log(res);
			if (res.status === 200) {
				uni.showToast({
					title: '登录成功',
					icon: 'none'
				})
			}
			// 跳转回原页面
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
			/* 	// 获取所有历史访问页
				const arr = getCurrentPages();
				// 最后一项是上一个返回登录前的页面
				const obj = arr[arr.length - 1]
				console.log(obj);
				// 从对象中取到页面地址
				const url = '/' + obj.route */
		}).catch((err) => {
			console.log(err);
		})
	}
</script>

<style lang="scss">
	.loign {
		padding: 74rpx 60rpx;
		box-sizing: border-box;

		// 头部样式
		.headerLogin {
			margin-bottom: 44rpx;

			.label: {
				color: #191919;
				font-size: 40rpx;
			}

			.sLogin {
				margin-top: 14rpx;
				color: #b3b3b3;
				font-size: 20rpx;
			}
		}

		// form表单
		.loginForm {
			.uni-forms-item {
				margin-bottom: 0rpx;
			}

			.uni-forms-item__content {
				display: flex;
				padding: 18rpx;
				border-bottom: 1rpx solid #f3f1f2;
				margin-bottom: 30rpx;
				height: 96rpx;

				.is-input-border {
					border: none;
					// border-bottom: 1rpx solid #ccc;
				}

				.Code {
					font-size: 20rpx;
					color: #cea26a;
					// text-align: center;
					margin-top: 17rpx;
				}

				.timeForm {
					color: #b3b3b3;
				}
			}
		}

		.queryLogin {
			background: linear-gradient(90deg, #ecb53c, #ff9211);
			font-size: 20rpx;
			margin-top: 60rpx;
			height: 64rpx;
			line-height: 64rpx;
			border-radius: 59rpx;
		}
	}
</style>